<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3边框</title>
    <style>
        .div1{
            width:150px;
            height:150px;
            box-shadow:  10px 10px 5px hotpink;
            /*三个数字参数是边框  以及模糊程度*/
        }
        .div2{
            width:150px;
            height:150px;
            padding:15px;
            border:10px solid transparent;
            /*background-color: wheat;*/
            border-image: url(flex1.png) 30 30 round;
        }
        .div3{
            width:800px;
            height:800px;
            background: url(flex1.png) right bottom no-repeat,
            url(flex2.png) left top no-repeat;
        }
        .div4{
            width:150px;
            height:150px;
            /*上下*/
            /*background: linear-gradient(blue,pink);*/
            /*左右*/
            /*background: linear-gradient(to right,blue,pink);*/
            /*对角*/
            /*background: linear-gradient(to bottom right,blue,pink);*/
            /*指定角度线性变化*/
            /*background: linear-gradient(180deg,blue,pink);*/
            /*使用多个颜色结点*/
            /*background: linear-gradient(red,green,blue);*/
        }
 </style>
</head>
<body>
<div class="div1">边框阴影</div>
<!--box-shadow: h-shadow v-shadow blur spread color inset;-->
<div class="div2">边框图片</div>
<!--新的背景性：background-image 多重背景，用逗号隔开   background-size 指定背景图大小
background-origin指定了背景图像的位置区域
background-clip  背景剪裁属性,背景是指定位置开始绘制， -->
<div class="div3"></div>

<div class="div4"></div>
<script>

</script>
</body>
</html>